<template>
  <div class="login">
    <div class="loginTitle">天津生服有限公司</div>
    <div class="wrap" id="wrap">
      <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
          <p class="p1">登录</p>
        </div>
        <!-- 输入框 -->
        <div class="lgD">
          <el-input
            class="logGet_input"
            placeholder="请输入用户名"
            v-model="formLogin.account"
            clearable
          ></el-input>
        </div>
        <div class="lgD">
          <el-input
            class="logGet_input"
            type="password"
            placeholder="请输入密码"
            v-model="formLogin.password"
            show-password
          ></el-input>
        </div>
        <div class="logC">
          <el-button
            type="primary"
            @click="loginAction('formLogin')"
            @keyup.enter="loginAction('formLogin')"
            class="submits"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formLogin: {
        account: '',
        password: ''
      },
    }
  },
  methods: {
    async loginAction () {
      var url = 'System/GetloginUserAccount?Phone=' + this.formLogin.account + '&Password=' + this.formLogin.password
      let { data } = await this.$Http.get(url)
      if (data.length > 0) {
        if (data[0].WEBTYPE === '1') {
          //         [
          //     {
          //         "UserID": "1013",
          //         "UserName": "lanhao",
          //         "RealName": "兰浩",
          //         "MobilePhone": "15620907828",
          //         "UserPassword": "123456",
          //         "OrgID": "0010101",
          //         "OrgName": "管理部",
          //         "DepartmentName": "天津港一公司办公楼",
          //         "UserType": "1",
          //         "WEBTYPE": "1"
          //     }
          // ]
          localStorage.setItem('UserID', data[0].UserID)
          localStorage.setItem('DepartmentName', data[0].DepartmentName)
          localStorage.setItem('OrgID', data[0].OrgID)
          localStorage.setItem('OrgName', data[0].OrgName)
          localStorage.setItem('RealName', data[0].RealName)
          // localStorage.setItem('WEBTYPE', data[0].WEBTYPE)
          this.$router.push('/');
          // this.$router.push({
          //   path: '/Organization'
          // })
          this.$message({ // 提示成功信息
            type: 'success',
            message: '登录成功'
          })

        } else {
          this.$message({
            message: '对不起，您没有登录权限',
            type: 'warning'
          });
        }
      } else {
        this.$message({ // 提示失败信息
          type: 'error',
          message: '用户名或密码错误!'
        })
      }
    },
  }
}
</script>
<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
}
.loginTitle {
  /* margin: 1em 0 0.5em 0; */
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #007acc;
  /* font-style: italic; */
  /* font-family: 'Josefin Sans', sans-serif; */
  font-size: 45px;
  line-height: 54px;
  /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 10%;
  width: 100%;
  height: 10%px;
  position: absolute;
  z-index: 2;
}
.login img {
  /* width: 100%;
  height: 100%; */
  position: relative;
}
// .loginin h2 {
//   padding: 0 0 15px 0;
//   color: #26b4ea;
// }
// .loginin {
//   width: 350px;
//   height: auto;
//   border: 1px solid #b9b9b9;
//   border-radius: 5px;
//   padding: 10px;
//   box-sizing: border-box;
//   box-shadow: 10px -10px 10px #888888;
//   padding-right: 60px;
//   position: absolute;
//   top: 40%;
//   left: 55%;
// }
.submits {
  width: 100%;
}
#wrap {
  width: 100%;
  height: 1080px;
  background-image: url(../../assets/img/login2.jpg);
  /*
	height: 719px;
	width: 100;
	background-image: url(images/loginBackground.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;*/
  position: relative;
}
#head {
  height: 120px;
  width: 100;
  background-color: #c6eef5;
  text-align: center;
  position: relative;
}
#foot {
  width: 100;
  height: 126px;
  background-color: #cc9933;
  position: relative;
}
#wrap .logGet {
  height: 408px;
  width: 368px;
  position: absolute;
  background-color: #ffffff;
  top: 30%;
  right: 15%;
}
.logC a button {
  width: 100%;
  height: 45px;
  background-color: #64d0e2;
  border: none;
  color: white;
  font-size: 18px;
}
.logGet .logD.logDtip .p1 {
  display: inline-block;
  font-size: 28px;
  margin-top: 30px;
  width: 86%;
}
#wrap .logGet .logD.logDtip {
  width: 86%;
  border-bottom: 1px solid #64d0e2;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
}
.logGet .lgD img {
  position: absolute;
  top: 12px;
  left: 8px;
}
/deep/.el-input__inner {
  /* width: 100%; */
  height: 42px !important;
  border-color: #dcdfe6;
  padding-left: 15px;
  /* text-indent: 2.5rem; */
}
/deep/.el-input__icon {
  line-height: 42px;
}
#wrap .logGet .lgD {
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
#wrap .logGet .logC {
  width: 86%;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

// .title {
//   font-weight: bold;
//   color: #007c95;
//   font-size: 45px;
//   /*position: absolute;
//     font-size: 36px;
// 	height: 40px;
// 	width: 30%;
// 	top: 50%;
// 	left: 50%;
// 	transform: translate(-50%, -50%);   使用css3的transform来实现 */
//   padding-top: 30px;
//   white-space: nowrap;
// }

// .copyright {
//   font-family: '宋体';
//   color: #ffffff;
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
//   height: 60px;
//   width: 40%;
//   text-align: center;
// }

// #foot .copyright .img {
//   width: 100%;
//   height: 24px;
//   position: relative;
// }
// .copyright .img .icon {
//   display: inline-block;
//   width: 24px;
//   height: 24px;
//   margin-left: 22px;
//   vertical-align: middle;
//   background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);
//   background-repeat: no-repeat;
//   vertical-align: middle;
//   margin-right: 5px;
// }

// .copyright .img .icon1 {
//   display: inline-block;
//   width: 24px;
//   height: 24px;
//   margin-left: 22px;
//   vertical-align: middle;
//   background-image: url(%E5%9C%B0%E5%9D%80.png);
//   background-repeat: no-repeat;
//   vertical-align: middle;
//   margin-right: 5px;
// }
// .copyright .img .icon2 {
//   display: inline-block;
//   width: 24px;
//   height: 24px;
//   margin-left: 22px;
//   vertical-align: middle;
//   background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);
//   background-repeat: no-repeat;
//   vertical-align: middle;
//   margin-right: 5px;
// }
// #foot .copyright p {
//   height: 24px;
//   width: 100%;
// }
</style>
